<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        nav {
            height: 50px;
            width: 1120px;
            margin: auto;
            text-align: center;
            line-height: 50px;
            font-size: 24px;
            padding: 0 12px 10px 62px;
            border-bottom: 2px solid #e8e8e8;
        }

        a {
            /* display: inline-block; */
            font-size: 16px;
            float: right;

        }

        ul {

            margin: 10px auto;
            list-style: none;
            width: 1200px;
        }

        li {
            float: left;
        }

        .libox img {
            width: 223px;
            height: 122px;
        }

        .libox {
            margin-bottom: 10px;
            padding-left: 8px;
            padding-right: 8px;
        }

        /* 免费字体颜色 */
        .color {
            color: #00cf8c;
        }

        .size {
            font-weight: 500px;
        }

        [v-cloak] {
            display: none;
        }
        h1{
            text-align: center;
        }
    </style>
</head>

<body>
    <div id='app'>


        <router-view></router-view>
    </div>

    <!-- 首页模板 -->
    <template id="index">
        <div>
            <mylogin title="free" pagesize=10>免费课程</mylogin>
            <mylogin title="boutique">精品课程</mylogin>
            <mylogin title="discount">折扣课程</mylogin>
        </div>
    </template>
    <!-- 首页模板结束 -->

    <!-- 首页模板注册 -->
    <script>
        let index = {
            template: "#index",

        }
    </script>
    <!-- 首页模板注册结束 -->

    <template id="demo">
        <div>
            <div class="libox">
                <img :src="courseId.bannerFileUrl" alt="">
            </div>
            <p>
                名称：{{courseId.courseTitle}}
            </p>
        </div>
    </template>
    <script>
        let demo = {
            template: "#demo",
            data() {
                return {
                    courseId: []
                }
            },
            created() {
                console.log(this.$route.query.courseId);
                let courseId = this.$route.query.courseId
                axios.get(`http://59.111.104.104:8086/pc/course/detail/${courseId}`).then((res) => {
                    console.log(res);
                    this.courseId = res.data.data

                })

            }
        }
    </script>

    <template id="mylogin">
        <div>
            
            <ul>
                <h1>
                    <slot></slot>
                </h1>
                <li class="libox" v-for="(item,index) in res" :key=index>
                    <router-link :to="{path:'/demo',query:{'courseId':item.courseId}}">
                        <img :src="item.bannerFileUrl" alt="">
                        <!-- 课程名称 -->
                        <div>{{item.courseTitle}}</div>
                        <!-- 课程数 -->
                        <span>共{{item.subSectionNum}}节课</span> |
                        <!-- 报名人数 -->
                        <span>{{item.participationsCount}}人报名</span>
                        <div>免费</div>
                        <p>{{item.courseId}}</p>
                    </router-link>
                </li>

            </ul>
        </div>
    </template>
    <script>
        Vue.component("mylogin", {
            template: "#mylogin",
            data() {
                return {
                    res: []
                }
            },
            created() {

                let params = new URLSearchParams
                params.append("type", this.title)
                params.append("pageNum", 1)
                params.append("pageSize", this.pagesize)
                axios.post("http://59.111.104.104:8086/weChat/applet/course/list/type", params).then((res) => {
                    console.log(res);
                    this.res = res.data.rows

                })

            },
            props: {
                title: String,
                pagesize: { type: [Number, String], default: 5 }

            }

        })
    </script>


    <script>
        // 
        let router = new VueRouter({
            routes: [
                { path: "/", redirect: "/index" },
                { path: "/index", component: index },
                { path: "/demo", component: demo }
            ]
        })

        // 
        const vm = new Vue({
            el: '#app',
            data: {
            },
            router
        })
    </script>
</body>

</html>